<template>
    <vol-box
        :title="title"
        v-model="dialogVisible"
        :width="1080"
        :draggable="true"
        :on-model-close="closeDialog"
    >
        <template #content>
            <el-form
                ref="formRef"
                :model="formData"
                :rules="formRules"
                :inline="true"
                label-position="top"
            >
                <el-form-item label="姓名：" prop="姓名">
                    <el-input
                        v-model.trim="formData['姓名']"
                        placeholder="请输入姓名"
                        clearable
                        :style="inputWidth"
                        @change="nameChange"
                    />
                </el-form-item>
                <el-form-item label="性别：" prop="性别">
                    <el-select
                        v-model="formData['性别']"
                        placeholder="请选择性别"
                        :style="inputWidth"
                        @change="computeClassificationNumberAndCategoryName"
                    >
                        <el-option
                            v-for="item in genderOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号：" prop="身份证号">
                    <el-input
                        v-model.trim="formData['身份证号']"
                        placeholder="请输入身份证号"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="出生日期：" prop="出生日期">
                    <el-date-picker
                        v-model="formData['出生日期']"
                        placeholder="请选择出生日期"
                        type="date"
                        :style="inputWidth"
                        @change="computeClassificationNumberAndCategoryName"
                    />
                </el-form-item>
                <!-- <el-form-item label="出生年份：" prop="出生年份">
                    <el-date-picker
                        v-model="formData['出生年份']"
                        type="year"
                        placeholder="请选择出生年份"
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="出生月份：" prop="出生月份">
                    <el-date-picker
                        v-model="formData['出生月份']"
                        type="month"
                        placeholder="请选择出生月份"
                        :style="inputWidth"
                        format="M"
                    />
                </el-form-item>
                <el-form-item label="出生日期：" prop="出生日期">
                    <el-date-picker
                        v-model="formData['出生日期']"
                        type="date"
                        placeholder="请选择出生日期"
                        :style="inputWidth"
                        format="D"
                    />
                </el-form-item>
                <el-form-item label="生日：" prop="生日">
                    <el-date-picker
                        v-model="formData['生日']"
                        type="datetime"
                        :style="inputWidth"
                        format="YYYY/M/D"
                    />
                </el-form-item> -->
                <el-form-item label="籍贯国：" prop="籍贯国">
                    <el-select
                        v-model="formData['籍贯国']"
                        placeholder="请选择籍贯国"
                        clearable
                        :style="inputWidth"
                        :disabled="disabled"
                    >
                        <el-option
                            v-for="item in countryOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="籍贯省：" prop="籍贯省">
                    <el-select
                        v-model="formData['籍贯省']"
                        placeholder="请选择籍贯省"
                        clearable
                        :style="inputWidth"
                        @change="provinceChange(formData['籍贯省'])"
                    >
                        <el-option
                            v-for="item in provinceOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="籍贯市：" prop="籍贯市">
                    <el-select
                        v-model="formData['籍贯市']"
                        placeholder="请选择籍贯市"
                        clearable
                        :style="inputWidth"
                        @change="computeClassificationNumberAndCategoryName"
                    >
                        <el-option
                            v-for="item in cityOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="入职学历：" prop="入职学历">
                    <el-select
                        v-model="formData['入职学历']"
                        placeholder="请选择入职学历"
                        clearable
                        :style="inputWidth"
                    >
                        <el-option
                            v-for="item in educationOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="招聘属性：" prop="招聘属性">
                    <el-input
                        v-model.trim="formData['招聘属性']"
                        placeholder="请输入招聘属性"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="目标工位：" prop="目标工位">
                    <el-input
                        v-model.trim="formData['目标工位']"
                        placeholder="请输入目标工位"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="人员号：" prop="人员号">
                    <el-input
                        v-model="formData['人员号']"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="工号：" prop="工号">
                    <el-input
                        v-model="formData['工号']"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="设置人：" prop="设置人">
                    <el-input
                        v-model.trim="formData['设置人']"
                        placeholder="请输入设置人"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="设置时间：" prop="设置时间">
                    <el-date-picker
                        v-model="formData['设置时间']"
                        type="datetime"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="自动别名：" prop="自动别名">
                    <el-input
                        v-model.trim="formData['自动别名']"
                        :disabled="disabled"
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="同名人数：" prop="同名人数">
                    <el-input
                        v-model="formData['同名人数']"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="分类号：" prop="分类号">
                    <el-input
                        v-model="formData['分类号']"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="分类名：" prop="分类名">
                    <el-input
                        v-model="formData['分类名']"
                        :style="inputWidth"
                        :disabled="disabled"
                    />
                </el-form-item>
                <el-form-item label="期望月薪：" prop="期望月薪">
                    <el-input
                        v-model.trim="formData['期望月薪']"
                        placeholder="请输入期望月薪"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="确认月薪：" prop="确认月薪">
                    <el-input
                        v-model.trim="formData['确认月薪']"
                        placeholder="请输入确认月薪"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="初审人：" prop="初审人">
                    <el-input
                        v-model.trim="formData['初审人']"
                        placeholder="请输入初审人"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="初审时间：" prop="初审时间">
                    <el-date-picker
                        v-model="formData['初审时间']"
                        type="datetime"
                        placeholder="请选择初审时间"
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="终审人：" prop="终审人">
                    <el-input
                        v-model.trim="formData['终审人']"
                        placeholder="请输入终审人"
                        clearable
                        :style="inputWidth"
                    />
                </el-form-item>
                <el-form-item label="终审时间：" prop="终审时间">
                    <el-date-picker
                        v-model="formData['终审时间']"
                        type="datetime"
                        placeholder="请选择终审时间"
                        :style="inputWidth"
                    />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div>
                <el-button
                    @click="closeDialog"
                >
                    关闭
                </el-button>
                <el-button
                    type="primary"
                    :loading="loading"
                    @click="doBt"
                >
                    确定
                </el-button>
            </div>
        </template>
    </vol-box>
</template>
  
<script setup>
import { ref } from 'vue'
import http from '@/api/http'
import { formatTime, formatTimeToObjInteger } from '@/uitils/formatTime'
import VolBox from '@/components/basic/VolBox.vue'
import { ElMessage } from 'element-plus'

// 变量
const title = ref('入职信息录入')
const dialogVisible = ref(false)
const inputWidth = ref({
    width: '230px'
})
const disabled = ref(true)
const formData = ref({
    '招聘属性': '',
    '目标工位': '',
    '人员号': '',
    '工号': '',
    '设置人': '',
    '设置时间': new Date(),
    '籍贯国': '中国',
    '籍贯省': '',
    '籍贯市': '',
    '同名人数': '',
    '分类号': '',
    '分类名': '',
    '性别': '男',
    '期望月薪': '',
    '确认月薪': '',
    '初审人': '',
    '初审时间': '',
    '终审人': '',
    '终审时间': '',
    '姓名': '',
    '自动别名': '',
    '身份证号': '',
    '出生日期': '',
    // '出生年份': '',
    // '出生月份': '',
    // '出生日期': '',
    // '生日': ''
    '入职学历': ''
})
const formRules = ref(
    {
        '姓名': [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        '性别': [
            { required: true, message: '请选择性别', trigger: 'change' }
        ],
        '出生日期': [
            { required: true, message: '请选择出生日期', trigger: 'change' }
        ],
        '籍贯省': [
            { required: true, message: '请选择籍贯省', trigger: 'change' }
        ],
        '籍贯市': [
            { required: true, message: '请选择籍贯市', trigger: 'change' }
        ]
    }
)
const loading = ref(false)
const countryOptions = ref([
    {
        label: '中国',
        value: '中国'
    }
])
let provinceOptions = ref([])
const cityOptions = ref([])
const genderOptions = ref([
    {
        label: '男',
        value: '男'
    },
    {
        label: '女',
        value: '女'
    }
])
const district = ref([])
const hmcAll = ref([])
const formRef = ref(null)
const educationOptions = ref(
    [
        {
            label: '文盲',
            value: '文盲'
        },
        {
            label: '幼儿园',
            value: '幼儿园'
        },
        {
            label: '初小',
            value: '初小'
        },
        {
            label: '高小',
            value: '高小'
        },
        {
            label: '初中',
            value: '初中'
        },
        {
            label: '高中',
            value: '高中'
        },
        {
            label: '专科',
            value: '专科'
        },
        {
            label: '本科',
            value: '本科'
        },
        {
            label: '硕士研究生',
            value: '硕士研究生'
        },
        {
            label: '博士研究生',
            value: '博士研究生'
        }
    ]
)

// 函数
const emits = defineEmits(['sucess'])

defineExpose(
    {
        open
    }
)

function init() {
    // 获取字典
    http.get(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hr/district`).then(res => {
        district.value = res.data
        const uniqueArray = res.data.filter((obj, index, self) =>
            index === self.findIndex((t) => t['省/国名'] === obj['省/国名'])
        )
        for (const item of uniqueArray) {
            provinceOptions.value.push(
                {
                    label: item['省/国名'],
                    value: item['省/国名']
                }
            )
        }
    }).catch(error => {
        console.log(error)
    })

    // 获取人员数量
    http.get(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hmc/recCount`).then(res => {
        const result = padString(res.data + 1, 6)
        formData.value['人员号'] = `RY${result}`
        formData.value['工号'] = `GH${result}`
    }).catch(error => {
        console.log(error)
    })

    // 获取所有花名册列表
    http.get(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hmc/all`).then(res => {
        hmcAll.value = res.data
    }).catch(error => {
        console.log(error)
    })
}

function nameChange() {
    formData.value['同名人数'] = ''
    formData.value['自动别名'] = ''
    let count = 0
    for (const item of hmcAll.value) {
        if (formData.value['姓名'] === item['姓名']) {
            count ++
        }
    }
    if (formData.value['姓名']) {
        formData.value['同名人数'] = count
        formData.value['自动别名'] = `${formData.value['姓名']}${count + 1}`
    }
}

function padString(str, length) {
  return String(str).padStart(length, '0')
}

// 选择省触发的函数，用来获取对应省下面的市区
function provinceChange(val) {
    formData.value['籍贯市'] = ''
    cityOptions.value = []
    for (const item of district.value) {
        if (val == item['省/国名']) {
            cityOptions.value.push(
                {
                    label: item['地市'],
                    value: item['地市']
                }
            )
        }
    }
    computeClassificationNumberAndCategoryName()
}

// 计算分类号和分类名
function computeClassificationNumberAndCategoryName () {
    getClassificationNumber()
    getCategoryName()
}

// 获取分类号
function getClassificationNumber() {
    formData.value['分类号'] = ''
    const objTime = formatTimeToObjInteger(formData.value['出生日期'])
    const sex = formData.value['性别'] === '男' ? 1 : 0
    // 省/国码
    for (const item of district.value) {
        if (item['省/国名'] === formData.value['籍贯省'] && item['地市'] === formData.value['籍贯市']) {
            formData.value['分类号'] = `${objTime.year}-${item['省/国码']}_${item['市/州码']}.${sex}`
        }
    }
}

// 获取分类名
function getCategoryName() {
    formData.value['分类名'] = ''
    const objTime = formatTimeToObjInteger(formData.value['出生日期'])
    // 省/国码
    for (const item of district.value) {
        if (item['省/国名'] === formData.value['籍贯省'] && item['地市'] === formData.value['籍贯市']) {
            formData.value['分类名'] = `${objTime.year}年生_${item['省/国名']}${item['地市']}人_${formData.value['性别']}`
        }
    }
}

function open() {
    dialogVisible.value = true
    init()
}

function closeDialog() {
    emits('sucess')
    dialogVisible.value = false
}

function doBt() {
    const objTime = formatTimeToObjInteger(formData.value['出生日期'])
    const formTemp = {
        ...formData.value
    }
    delete formTemp['出生日期']
    formTemp['出生年份'] = objTime.year
    formTemp['出生月份'] = objTime.month
    formTemp['出生日期'] = objTime.date
    formTemp['生日'] = `${objTime.year}/${objTime.month}/${objTime.date}`
    if (formTemp['初审时间']) {
        formTemp['初审时间'] = formatTime(formTemp['初审时间'])
    }
    if (formTemp['终审时间']) {
        formTemp['终审时间'] = formatTime(formTemp['终审时间'])
    }
    if (formTemp['设置时间']) {
        formTemp['设置时间'] = formatTime(formTemp['设置时间'])
    }
    formRef.value.validate(valid => {
        if (valid) {
            loading.value = true
            http.post(`${window.URL_CONFIG.VUE_APP_SYSTEM_API}/hr/hmc/add`, JSON.stringify(formTemp)).then(res => {
                if (res) {
                    loading.value = false
                    ElMessage({
                        type: 'success',
                        message: '添加成功！'
                    })
                    closeDialog()
                }
            }).catch(error => {
                console.log(error)
                loading.value = false
            })
        }
    })
}
</script>
  